<template>
    <view class="goods-item">
		<view class="img-box">
			<image class="image" :src="item.pic" :lazy-load="true" @load="finishLoad"></image>
			<view class="loading" v-if="loading">
				<view class="load-item pink"></view>
				<view class="load-item red"></view>
				<view class="load-item orange"></view>
				<view class="load-item yellow"></view>
			</view>
		</view>
		<view class="goods-content">
			<view class="goods-name">{{ item.title }}</view>
			<view class="goods-price">
				<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201214/fe975220-3def-11eb-b900-93b42b1e78d6.png"></image>
				<view class="plat-price">¥{{ item.price }}</view>
				<view class="change-price">¥<text class="text">{{ price[0] }}.</text>{{ price[1] }}</view>
				<view class="end-price">¥{{ item.endPrice }}</view>
			</view>
			
			<view class="buy" @tap="buyProduct()">
				立即抢购
			</view>
		</view>
		
		<!-- 快捷登录 -->
		<authorize ref="authorize"></authorize>
    </view>
</template>

<script>
	import Authorize from '@/components/Authorize';
	import { mapGetters } from 'vuex';
    export default {
        name: "GoodsItem",
		components: {
			Authorize
		},
        props: {
            item: {
                type: Object,
                default: () => {
                    return {}
                }
            },
			index: {
				type: Number,
				default: () => {
					return 0
				}
			}
        },
		data() {
			return {
				loading: true,
				price: []
			}
		},
		computed: {
			...mapGetters(['stepUserInfo'])
		},
		created() {
			let arr = (Number(this.item.endPrice) - Number(this.item.tljMoney)).toFixed(2);
			this.price = arr.split('.');
		},
		methods: {
			// 图片加载完成
			finishLoad() {
				this.loading = false;
			},
			buyProduct() {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				uni.showLoading({
					title: '加载中...'
				});
				if (this.item.hasBuy === 1) {
					this.$emit('onCopySuccess', this.item.tkl);
					setTimeout(() => {
						uni.hideLoading();
					}, 2000)
				} else {
					delete this.item.app;
					this.$service.million.goods.dayGoodsBuy({
						...this.item,
						itemId: this.item.gid,
						sdkType: 'zfb',
						isBybt: true
					}).then(res => {
						uni.showToast({
							title: '已抢到权益，请尽快购买',
							icon: 'none'
						});
						this.$emit('onCopySuccess', res);
						uni.hideLoading();
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
						uni.hideLoading();
					})
				}

				my.reportAnalytics('click_xianshidj_sp' + (this.index + 1), {
					desc: '点击限时底价第' + (this.index + 1) + '个商品'
				});
			},
		}
    }
</script>

<style lang="scss" scoped>
.goods-item {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	margin-top: 40rpx;
	@include flexBox(center, center);
	.img-box {
		width: 264rpx;
		height: 264rpx;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		.loading {
			position: absolute;
			width: 100%;
			height: 100%;
			@include flexBox(center);
			.load-item {
				width: 20rpx;
				height: 100rpx;
				margin: 0 10rpx;
				border-radius: 50rpx;
				&.pink {
					background: #fb889b;
					animation: pink 0.8s infinite;
				}
				&.red {
					background: #fb8888;
					animation: red 0.8s infinite;
				}
				&.orange {
					background: #fba488;
					animation: orange 0.8s infinite;
				}
				&.yellow {
					background: #fbc188;
					animation: yellow 0.8s infinite;
				}
			}
		}
		.image {
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}
	.goods-content {
		width: 348rpx;
		height: 264rpx;
		margin-left: 36rpx;
		@include flexBox(space-between, space-between, column);
		.goods-name {
			font-size: 28rpx;
			color: #030303;
			margin-bottom: 10rpx;
			@include ellipsis(1);
		}
		.goods-price {
			width: 348rpx;
			height: 135rpx;
			font-size: 24rpx;
			margin-bottom: 10rpx;
			position: relative;
			@include flexBox(space-between);
			.image {
				width: 348rpx;
				height: 135rpx;
				position: absolute;
			}
			.change-price {
				font-size: 30rpx;
				position: relative;
				color: #FFFFFF;
				margin-bottom: 20rpx;
				.text {
					font-size: 38rpx;
					margin-left: 2rpx;
				}
			}
			.end-price, .plat-price {
				padding-bottom: 40rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}
		.buy {
			text-align: center;
			line-height: 60rpx;
			background: #FE4A2C;
			font-size: 28rpx;
			color: #fff;
			width: 230rpx;
			margin: 0 auto;
			border-radius: 50rpx;
		}
	}
}
@keyframes pink {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes red {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
@keyframes orange {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes yellow {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
</style>
